<template>
    <div class="recycle-warp">
        <div class="main-template-header">
            <!-- <div class="title">我的项目（{{  tableData.length  }}个）</div> -->
            <div class="main-search">
                <el-input size="small" placeholder="请输入关键字查询" clearable v-model.trim="recycleName" @keyup.enter.native="getRecycleList">
                    <el-button slot="append" icon="el-icon-search" @click="getRecycleList"></el-button>
                </el-input>
            </div>
        </div>
        <div class="project-content">
            <div class="single-peoject" v-for="(item, index) in tableData" :key="index" @click="editProject(item)" @mouseover="showButton(item)" @mouseleave="hideButton(item)">
                <div class="thumb">
                    <img :src="getPreview(item.preview)" alt="item.name" />
                </div>
                <div class="deacribe">
                    <div class="name">{{  item.name  }}</div>
                    <div class="time">{{  item.createtime  }}</div>
                </div>
                <div class="handle" :id="'btn' + item.id">
                    <div class="edit-btn" @click.stop="recoverTemplete(item)">
                        恢复
                    </div>
                </div>
            </div>
            <!-- 勿删！！！，弹性布局占位 -->
            <div class="single-peoject-last" v-for="item in 20" :key="item + 5000"></div>
        </div>
    </div>
</template>

<script>
import icon_default from '@/image/scene/icon_default.svg';
import config from '@/js/util/config.js';
import request from '@/js/util/url.js';
import user from '@/js/util/user.js';
import message from '@/js/util/message.js';

export default {
    data() {
        return {
            recycleName: '',
            tableData: []
        };
    },
    mounted() {
        this.getRecycleList();
    },
    methods: {
        showButton(item) {
            document.getElementById(`btn${item.id}`).style.display = 'block';
        },
        hideButton(item) {
            document.getElementById(`btn${item.id}`).style.display = 'none';
        },
        getRecycleList() {
            let param = {
                token: user.getToken(),
                name: this.recycleName
            };
            let result = request.getRecycleTemplateList(param);
            if (result.state.code === 10000) {
                this.tableData = result.body.message.list ? result.body.message.list : [];
            }
        },
        recoverTemplete(row) {
            let _this = this;
            message.confirm(
                '是否恢复',
                '',
                function() {
                    let param = {
                        token: user.getToken(),
                        id: row.id
                    };
                    let result = request.recoverRecycleTemplateList(param);
                    if (result.state.code === 10000) {
                        message.message('恢复成功', 'success');
                        _this.getRecycleList();
                    } else {
                        message.message(result.body.message, 'error');
                    }
                },
                function() {
                    message.message('已取消恢复！', 'info');
                }
            );
        },
        getPreview(url) {
            return url ? `${config.getServiceURL('scene')}service/scene/file/download?file=${url}` : icon_default;
        }
    }
};
</script>
<style lang='scss' scoped>
.recycle-warp {
    height: 100%;
    overflow: hidden;
    .project-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow-y: auto;
        height: calc(100% - 100px);
        .edit-btn {
            margin: 90px auto;
        }
    }
}
</style>